<template>
  <div class="myroute_box">
    <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goMine">
      </div>
      <span slot="center">
        我的发布
      </span>
      <div slot="right" @click="routeManage" v-if="!manageClick">
        管理
      </div>
      <div slot="right" @click="routeManage" v-if="manageClick">
        取消
      </div>
    </topHeader>
    <div class="myroute_box_con">
      <div class="myroute_box_con_t">
        <button-tab v-model="tabValue" >
          <button-tab-item @on-item-click="tabClick(1)">我的发布</button-tab-item>
          <button-tab-item @on-item-click="tabClick(2)">未支付订单</button-tab-item>
        </button-tab>
      </div>
      <div class="myroute_box_con_b" v-if="routeList.length > 0 && tabValue === 0">
        <div class="order_li" v-for="(item,index) of routeList">
          <div class="order_li_l">
            <p>始终点：{{ item.start }} &rarr; {{ item.end }}</p>
            <p>时间：{{ item.outtime }}</p>
            <p>座位：{{ item.freeSeat }}人</p>
            <p>乘客分摊费用：{{ item.cost }}/人</p>
            <p>路线：{{ item.roadline }}</p>
            <!-- <p>人数：1人</p> -->
          </div>
          <div class="order_li_r">
            <div class="update_btn" @click="viewRoute(item)" v-if="!manageClick" >查看</div>
            <div class="delate_btn" @click="updateRoute(item.id)" v-else>修改</div>
            <!-- <div class="flag">已取消</div> -->
          </div>
        </div>
      </div>
      <div class="myroute_box_unpay" v-if="tabValue === 1 && payBoolean">
          <div class="my_unpay">
            <div class="img"><img src="./../../assets/img/waring_1.png" alt=""></div>
            <p>信息费未支付，请前往支付页面</p>
          </div>
          <div class="pay_btn" @click="goPay">下一步</div>
      </div>
      <div class="myroute_box_unpay" v-if="tabValue === 1 && !payBoolean">
          <div class="my_unpay">
            <!-- <div class="img"><img src="./../../assets/img/waring_1.png" alt=""></div> -->
            <p>暂无未支付订单</p>
          </div>
          <!-- <div class="pay_btn" @click="goPay">下一步</div> -->
      </div>
    </div>
    <popup v-model="routeInfoShow" position="bottom" width="100%" height="100%">
      <div class="route_info_box">
        <topHeader>
          <div slot="center">
            <span>路线详情</span>
          </div>
          <div class="close" slot="right" @click="closeRouteInfo">
            &times;
          </div>
        </topHeader>
        <div class="myroute_box_con_b">
          <div class="order_li">
            <div class="order_li_l">
              <p>【始终点】：{{ routerInfo.start }} &rarr; {{ routerInfo.end }}</p>
              <p>【时间】：{{ routerInfo.outtime }}</p>
              <p>【车型】：{{ routerInfo.motorType }}</p>
              <p>【座位】：{{ routerInfo.freeSeat }}人</p>
              <p>【车费】：{{ routerInfo.cost }}/人</p>
              <p>【路线】：{{ routerInfo.roadline }}</p>
              <p>【路线】：{{ routerInfo.remark }}</p>
              <!-- <p>路线：{{ routerInfo.roadline }}</p> -->
              <!-- <p>人数：1人</p> -->
            </div>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import { loadReverseList, unpayOrder } from '@/api/allapis'
import { ButtonTab, ButtonTabItem, Popup } from 'vux'
import topHeader from './../../components/topHeader'
export default {
  data () {
    return {
      tabValue: 0,
      manageClick: false,
      routeInfoShow: false,
      routeList: [],
      routerInfo: {},
      payBoolean: true

    }
  },

  components: {
    topHeader,
    ButtonTab,
    ButtonTabItem,
    Popup
  },

  computed: {
    userInfo () {
      return this.$store.state.user.uerInfo
    }
  },

  mounted () {
    this.loadReverseList()
    this.unpayOrder()
  },

  methods: {
    unpayOrder () {
      unpayOrder({ openid: this.$store.state.user.openid }).then(res => {
        if (res.data === '已支付') {
          this.payBoolean = false
          console.log('已支付')
        }
      })
    },
    goMine () {
      this.$router.go(-1)
    },
    loadReverseList () {
      console.log(this.userInfo)
      loadReverseList({ userId: this.$store.state.user.uerInfo.id, type: 1 }).then(res => {
        if (res.data) {
          this.routeList = res.data
        }
      })
    },
    tabClick (type) {
      if (type === 1) {
        this.tabValue = 0
      } else {
        this.tabValue = 1
      }
    },
    viewRoute (item) {
      this.routeInfoShow = true
      this.routerInfo = item
    },
    closeRouteInfo () {
      this.routeInfoShow = false
    },
    updateRoute (id) {
      this.$router.push({ name: 'updatePublish', query: { id: id } })
    },
    routeManage () {
      this.manageClick = !this.manageClick
    },
    goPay () {
      this.$router.push({ name: 'payinfo' })
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./myroute.less');
</style>